<template>
	<div class="mailbox_config_wrapper">
		<el-form class="filter" :inline="true" size="small">
			<el-form-item>
				<el-input v-model="filterForm.deName" placeholder="信箱账号" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="filterForm.content" placeholder="信箱名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getDictListData" plain>查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleOpenDialog('add')">添加</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%" stripe v-loading="loading">
			<el-table-column fixed prop="deName" label="信箱账号"></el-table-column>
			<el-table-column prop="content" label="信箱名称"></el-table-column>
			<el-table-column prop="createTime" label="创建时间"></el-table-column>
			<el-table-column prop="updateTime" label="修改时间"></el-table-column>
			<el-table-column label="操作" width="136">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button type="primary" size="mini" @click="handleOpenDialog('edit', row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="handleDelete(row.id)">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<Pagination v-show="dataCount > 0" :total="dataCount" @change="getDictListData" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
		<el-dialog :title="dialogTitle" :visible.sync="mailboxDialog" width="700px" :close-on-click-modal="false">
			<el-form ref="mailboxForm" :model="mailboxForm" :rules="mailboxRules" label-width="80px">
				<el-form-item label="名称" prop="deName">
					<el-input v-model="mailboxForm.deName"></el-input>
				</el-form-item>
				<el-form-item label="值" prop="deValue">
					<el-input v-model="mailboxForm.deValue"></el-input>
				</el-form-item>
				<el-form-item label="描述" prop="content">
					<el-input type="textarea" v-model="mailboxForm.content"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="mailboxDialog = false">取消</el-button>
				<el-button type="primary" @click="handleSubmit">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { tbDictDefinitionQuery } from '@/api/admin/system/dictionary';
import { tbDictDetailQuery, tbDictDetailAdd, tbDictDetailUpdate, tbDictDetailDelete } from '@/api/admin/system/dictionaryDet.js';
export default {
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 10
			},
			loading: false,
			dictId: null,
			dataCount: 0,
			filterForm: {},
			tableData: [],
			mailboxForm: {},
			mailboxRules: {
				deName: [
					{ required: true, message: '请输入中文名称', trigger: 'blur' },
					{ min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
				],
				deValue: [
					{ required: true, message: '请输入值', trigger: 'blur' },
					{ min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
				],
				del: [{ required: true, message: '请选择是否可用', trigger: 'change' }]
			},
			mailboxDialog: false,
			addOrEdit: true
		};
	},
	computed: {
		dialogTitle() {
			return !this.addOrEdit ? '编辑信箱' : '新增信箱';
		}
	},
	mounted() {
		this.getDictDataByCode();
	},
	methods: {
		//获取信箱配置id
		async getDictDataByCode() {
			let dict = await tbDictDefinitionQuery({ code: 'LEADER_MAIL' }).then((res) => res.data);
			if (dict.code === '0') {
				this.dictId = !!dict.data && dict.data.length > 0 ? dict.data[0].id : null;
				this.getDictListData();
			}
		},

		//获取信箱配置
		async getDictListData() {
			if (!!this.dictId) {
				let params = { ...this.filterForm, ...this.listQuery, dictId: this.dictId };
				let result = await tbDictDetailQuery(params).then((res) => res.data);
				if (result.code === '0') {
					this.tableData = !result.data ? [] : result.data;
				}
			}
		},

		handleFilter() {
			this.getDictListData();
		},

		//打开信箱表单
		handleOpenDialog(type, data) {
			if (type === 'add') {
				this.addOrEdit = true;
				this.mailboxForm = { dictId: this.dictId };
			} else if (type === 'edit') {
				this.addOrEdit = false;
				this.mailboxForm = { ...data };
			}
			this.mailboxDialog = true;
		},

		//提交表单
		handleSubmit() {
			this.$refs['mailboxForm'].validate((valid) => {
				if (!valid) return false;
				if (!this.addOrEdit) {
					tbDictDetailUpdate(this.mailboxForm).then((res) => {
						if (res.data.code == 0) {
							this.$message.success('修改成功');
							this.mailboxDialog = false;
							this.getDictListData();
						} else {
							this.$message.error(res.data.msg);
						}
					});
				} else {
					tbDictDetailAdd(this.mailboxForm).then((res) => {
						if (res.data.code == 0) {
							this.$message.success('新增成功');
							this.mailboxDialog = false;
							this.getDictListData();
						} else {
							this.$message.error(res.data.msg);
						}
					});
				}
			});
		},

		//删除信箱
		handleDelete(id) {
			let that = this;
			this.$confirm('此操作将永久删除该信箱, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteMailboxRequest(id);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除信箱请求
		async deleteMailboxRequest(id) {
			let result = await tbDictDetailDelete(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除成功');
				this.getDictListData();
			} else {
				this.$message.error(res.data.msg);
			}
		}
	}
};
</script>

<style scoped></style>
